Scriptia. Javascript y buenas prácticas en español

Eventos en jQuery 1.2

Días ha que escribí una nota sobre los eventos en jQuery. Y hora es de ampliar dicho artículo con las novedades que la serie 1.2 de jQuery añade al respecto.

Lo de siempre

Recordemos las bases de la asignación y el manejo de eventos en jQuery. La forma básica de asignar un manejador es la siguiente:

$('un.selector')
  .bind('click', unaFuncion);

El manejador (unaFuncion) recibe como parámetro el objeto que representa el evento (normalizado para tener acceso común a sus propiedades en los distintos navegadores). La función se ejecuta en el contexto del elemento al que se ha asignado el manejador.

function unaFuncion(e) {
    console.log('Contexto', this);
    console.log('Evento', e);
}

$('un.selector')
    .bind('click', unaFuncion);

Lo nuevo

Con jQuery 1.2 podemos asignar un manejador para varios eventos con una sola llamada a bind(). Utilizamos para ello una lista de nombres de evento separados por espacios. Observa que en el manejador tomamos una decisión basada en la propiedad type del objeto del evento.

function handle(e) {
  var $label = $(this).prev();
  if (e.type == 'focus') {
    $label.hide();
  }
  else if (this.value == '') {
    $label.show();
  }
}

$('#login input')
  .filter('[type=text], [type=password]')
    .bind('focus blur', handle);

Otra novedad interesante es la pseudonombrespaciación de eventos, que se puede practicar utilizando el nombre del evento seguido de un punto y un identificador arbitrario al asignar el manejador.

Y esto, ¿para qué? Para facilitar la eliminación de grupos de manejadores.

// en algún lugar del código de un drag'n'drop
$(document)
  .bind('mousemove.rock_n_roll', some_handler)
  .bind('mouseup.rock_n_roll', mouseup_handler);

// en el código de finalización del arrastre
$(document)
  .unbind('.rock_n_roll');

Y algo que no es exactamente nuevo pero mola todo y se conoce poco: podemos pasar un objeto de datos en la asignación. El manejador lo recibirá en la propiedad data del evento.

function handle_click(e) {
  alert(e.data.foo);
}

$.fn.somePlugin(opts) {
  var settings = $.extend({
    foo: 'bar'
  });
  this.bind('click', settings, handle_click);
  return this;
}

// mostrará "bar" al activar los enlaces
// con clase "tigre"
$('a.tigre').somePlugin();

// mostrará "tolo" al activar los enlaces
// con clase "leon"
$('a.leon').somePlugin({ foo: 'tolo' });

Por último, se incorpora a la API el método triggerHandler que complementa a trigger. La diferencia: triggerHandler dispara los manejadores asignados al evento pero no ejecuta las acciones por defecto del navegador.

Para más y mejor información y, de paso, practicar el inglés: Release: jQuery 1.2/Events.

Un patrón de desarrollo de plugins para jQuery

Mike Alsup, autor de jQuery form plugin y otras delicias, nos explica cómo crear un plugin para jQuery que cumpla con las condiciones de: no contaminar el espacio de nombres, acepte opciones (y las extienda), mantenga los límites adecuados entre lo público y lo privado y saque provecho del plugin de metadatos. Ahí es nada: A Plugin Development Pattern.

jQuery UI y jQuery 1.2.1

Llega jQuery UI, una colección de componentes reusables y de alta calidad: jQuery UI: Interactions and Widgets.

Y también la versión 1.2.1 de jQuery, con algunas correcciones de bugs sobre la 1.2.

Cómo crear un widget con (y para) Dojo

No sé si se notará mucho, pero estos últimos días me estoy metiendo hasta las trancas en el mundo de Dojo. Y claro, cuando encuentro información interesante, se me despierta una especie de espíritu bloguero que me incita a compartir enlaces. La lección de hoy: Dojo Custom Widget Tutorial.

Slideshow no intrusivo

Christian Heilmann, en su cruzada a favor del scripting no intrusivo, nos presenta un tutorial de lo más completo para crear un slideshow fácil de mantener. No utiliza efectos wow, ni falta que hace: A detailed explanation how to create a maintainable dynamic slide show in JavaScript.

Cómo crear un calendario simple

Scott Andrew LePera –el hombre detrás del primer addEvent– se ha propuesto escribir el tutorial que a él le hubiera gustado tener a mano cinco años atrás. En el primer artículo de la serie How to build a simple calendar with JavaScript nos explica cómo pintar un calendario de forma sencilla y sin bibliotecas de por medio.

Calendarios, calendarios, calendarios

Los muchachos de Sentido Web han elaborado una buena lista de calendarios javascript, merece la pena echarle un ojo.

Carrusel

Continua la lluvia de plugins para jQuery. Esta vez nos cae del cielo jCarousel, que permite controlar el desplazamiento por una lista de elementos (puede ser HTML estático o contenido cargado vía AJAX) de una manera, demonios, muy bonita.

Selección de fechas (al estilo jQuery)

Si has usado (o desarrollado) alguna vez un sitio web de viajes, seguro que has utilizado los selectores de fechas en forma de calendario popup. Si necesitas uno de estos elementos en tu nueva interfaz, no dejes de echarle un vistazo al nuevo plugin para jQuery: jQuery date picker, de Kelvin Luck.